<template>
    <div class="common-layout">
        <el-container class="container">
            <el-aside>
                <el-menu router="true" active-text-color="#ffd04b" background-color="#545c64"
                    class="el-menu-vertical-demo" default-active="1" text-color="#fff" style="min-height: 100vh;">
                    <el-header
                        style="display: flex;justify-content: center;align-items: center;background-color: darkslategray;">
                        年会抽奖系统
                    </el-header>
                    <el-menu-item index="record">
                        <el-icon>
                            <lock />
                        </el-icon>
                        <span>抽奖记录</span>
                    </el-menu-item>
                    <el-menu-item index="user">
                        <el-icon>
                            <user />
                        </el-icon>
                        <span>用户管理</span>
                    </el-menu-item>
                    <el-menu-item index="award">
                        <el-icon><coffee-cup /></el-icon>
                        <span>奖品管理</span>
                    </el-menu-item>
                    <el-menu-item index="awarditem">
                        <el-icon>
                            <document />
                        </el-icon>
                        <span>奖项管理</span>
                    </el-menu-item>
                    <el-menu-item index="activity">
                        <el-icon>
                            <setting />
                        </el-icon>
                        <span>活动管理</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header class="header">
                    <el-dropdown>
                        <span class="el-dropdown-link">
                            王敏
                            <el-icon class="el-icon--right">
                                <arrow-down />
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>个人资料</el-dropdown-item>
                                <el-dropdown-item @click="dialogVisible = true">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <el-avatar :size="40" class="avatar"
                        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                </el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
                <el-footer class="footer">由 仇唐峰 设计</el-footer>
            </el-container>
        </el-container>
    </div>
    <el-dialog v-model="dialogVisible" title="Warning" width="500" align-center>
        <span>确定退出登录吗？</span>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="logout">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
import { Document, Setting, User, CoffeeCup, Lock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

export default {
    name: "HomeView",
    components: {
        Setting,
        User,
        Document,
        Lock,
        CoffeeCup
    },

    data() {
        return {
            dialogVisible: false
        };
    },

    methods: {
        logout() {
            this.$http.post("/admin/auth/logout").then(() => {
                this.dialogVisible = false
                localStorage.removeItem('token')
                this.$router.replace({ path: '/login' })
            }).catch(() => {
                ElMessage({
                    message: '退出失败',
                    type: 'fail',
                    plain: true,
                    duration: 1000
                })
            })
        }
    }
};
</script>

<style scoped>
.container {
    min-height: 100vh;
}

.header {
    background-color: #545c64;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding-right: 25px;
}

.footer {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #545c64;
}

.avatar {
    margin-right: 10px;
}
</style>
